<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style> 
    html{
        height: 100%;

    }
    body{
        height: 100%;
        margin: 0;   
        background: gray;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url(timg3.jpg);
        background-size: cover;
           box-shadow: 1px 10px 50px black inset;
    }

    .bg{
        width: 30vw;
        height: 30vw;
        border-radius: 50%;
        position: relative;
        left: 20%;
        transition:1s;
        background: url(timg.jpg);
        background-size: cover;
        background-position: 40% 0;
        opacity: 0.6;
        animation: bianse 1s alternate-reverse infinite;
    }
    @keyframes bianse{
        0%{
            box-shadow: 1px 0px 0px black inset;
        }
        100%{
            box-shadow: 1px 100px 50px black inset;
        }
    }
 
    #testDiv{
        position: relative;
        top: 2vw;
        left: -14vw;
        font-size: 5vw;
        color:#807152;
        
    }
    #testDiv1{
        position: relative;
        top: -2vw;
        left: 7vw;
        font-size: 1vw;
        color:#807152;
        
    }
    .bk{
        border: 1px solid transparent;
        width: 27vw;
        height: 7vw;
        position: absolute;
        top:12vw;
        left: 1.5vw;
    }
    </style>
</head>
<body>

    <div class='bg'>

<div class="bk">
<script>
var divEle=document.createElement('div')
document.body.appendChild(divEle)
divEle.innerHTML=''
var today = new Date();
var yr = today.getFullYear();
var month = today.getUTCMonth()+1;
var day = today.getUTCDate();
var weekday =today.getDay();
divEle.innerHTML=yr+'年'+month+'月'+day+'日'+'星期'+''+weekday
divEle.id='testDiv1'
</script>

<script>
var divEle=document.createElement('div')
document.body.appendChild(divEle)
divEle.innerHTML=''
function daojishi(){
var Xmas17=new Date()
var hours=Xmas17.getHours()
var minutes = Xmas17.getMinutes();
var secs = Xmas17.getSeconds();
hours=hours<10?'0'+hours:hours
minutes=minutes<10?'0'+minutes:minutes
secs=secs<10?'0'+secs:secs
divEle.innerHTML=hours+':'+minutes+':'+secs
divEle.id='testDiv'
}
setInterval(daojishi,1)
</script>
</div>
    </div>
</body>
</html>
